<template>
    <div class="dee-field-container">
      <ul id="project-field-tree" class="ztree"></ul>
    </div>
</template>
<script>
  // import { tableInfo } from '../fieldDataFilter';
  import _ from 'lodash';
  import bus from '@/utils/bus';
  export default {
    data() {
      return {
        data: '字段树',
        main_Tree_Setting: {
          view: {
            selectedMulti: false,
            dblClickExpand: false,
            showIcon: false,
            fontCss: this.setFontCss
          },
          edit: {
            enable: true,
            editNameSelectAll: true,
            showRemoveBtn: false,
            showRenameBtn: true,
            renameTitle: '查看数据分布'
          },
          data: {
            keep: {
              parent: true
            },
            key: {
              name: 'title_name'
            },
            simpleData: {
              enable: true,
              idKey: 'id',
              pIdKey: 'pid'
            }
          },
          check: {
            chkboxType: { 'Y': 'ps', 'N': 's' },
            enable: true
          },
          callback: {
            onCheck: _.debounce(this.zTreeOnCheck, 200),
            beforeEditName: this.beforeEditName,
            beforeClick: this.beforeClick,
            onClick: this.onClick
          }
        }
      };
    },
    props: {
      headerListData: { // 接受父组件传过来的异步数据，子组件的mounted比父组件mounted快
        type: [Array, Object]
      }
    },
    mounted() {
      console.log(this.headerListData);
      this.headerListFilterHandle();
    },
    methods: {
      headerListFilterHandle() {
        const main_Tree = this.$.fn.zTree.init(this.$('#project-field-tree'), this.main_Tree_Setting, this.headerListData);
        main_Tree.expandAll(true);
      },
      /*
      *ztree的回调
      *
      */
      setFontCss(treeId, treeNode) {
        return (treeNode.layout && treeNode.layout.dim_input === 'table') ? { color: '#FA9D34' } : {};
      },
      onClick(event, treeId, treeNode) { this.beforeEditName(treeId, treeNode); },
      beforeEditName(treeId, treeNode) {
        if (treeNode.id.split('_').length !== 3) {
          return false;
        }
        if (treeNode.layout.dim_input === 'table') {
          // alerttable(treeNode.id, treeNode.title_en, treeNode.title_name);
          return false;
        }
      },
      beforeClick(treeId, treeNode, clickFlag) {
        if (treeNode.layout === undefined && treeNode.layout.dim_input === 'table') {
          return true;
        } else {
          return false;
        }
      },
      zTreeOnCheck(event, treeId, treeNode) { // 字段列表中  勾选事件
        console.log(treeId);
        if (treeNode.layout && treeNode.layout.dim_input === 'table') {
          return false;
        }
        bus.$emit('zTreeOnCheck', treeNode + '我被勾选了，啦啦啦');
        console.log(this);
      }
    }
  };
</script>
<style lang="scss" scoped>
::-webkit-scrollbar { width: 4px; height: 4px;}
.dee-field-container{
  width: 100%;
  height: 100%;
  padding: 50px 5px 5px 20px;
  background-color: #fff;
  }
#project-field-tree{
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: scroll;
}
</style>
